Rodrigo

Yeah that jump seems a bit difficult to avoid IMHO. When you add/remove elements that affects a ScrollTrigger instance(s) and then refresh, ScrollTrigger will run the calculations and instances will update accordingly and then update the animations based on that. On top of this Flip does records the most common on the state: https://gsap.com/docs/v3/Plugins/Flip/static.getState()#configuration I'm pretty sure that there must be a way to solve this, but my first guess is that is not a simple endeavor, a bit beyond the help we can provide in these free forums. The main issue seems to be that when you filter the elements and the ScrollTrigger instances don't update completely when the DOM is updated, so the flip animations don't reflect that. The simplest way I can think to tackle this is probably the ugliest, less efficient and can't guarantee that it'll work. Create three sets of elements. One that is the visible one with all the images in it (by the way, why always with the angry dude in the pictures? can't it be a kitten or a puppy? 😆), a copy of the previous but with the images not rendered and a copy of the filtered list with the images not rendered, so you can flip the elements that will remain in the DOM after filtering to those that already have the scale value applied to them. Another option is to refresh ScrollTrigger before the Flip animation, there is still a jump, but is at the start of the animation: https://codepen.io/GreenSock/pen/OJYyMrj Happy Tweening!

Hi, Cool demo! Thanks for sharing with the community 🥳 The only change I would made is to use our useGSAP hook in case you need scoping and/or cleanup later in your app: useGSAP(() => { state && Flip.from(state, config); }, { dependencies: [expand], }); Happy Tweening!

That could be done with SVG, with or without masking for example, IDK if you'd get the same performance though. Probably not as good but it wouldn't be terrible though. Is just about setting different paths from display none or opacity 0 to 1, they're staggered but not animated. The most important thing is that the containing element has to be above everything else in the stacking order and change it style from display none to block in order to allow user interaction with the other elements. Happy Tweening!

Hey Scott, I see the issue but I have zero experience with webflow so I don't really know what to do exactly there, sorry. My advice would be to first remove the animation on the Y axis and see how that works. If you keep having the same issue then try with other CSS styles or maybe wait for the fonts to be loaded (if you're using custom fonts): https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts Maybe try removing some CSS or create just a ScrollTrigger just for the last card and see how that works. If creating only the last ScrollTrigger instance works, then it means that something else is interfering with the instances created after the first one. Another option could be to call the refresh method after both your loops: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh() window.addEventListener("load", function() { // Animate each background container and image within feature cards document.querySelectorAll('.feature-reveal-card_bg-container').forEach(container => { ... }); // Animate content within each feature card with a staggered timeline document.querySelectorAll('.feature-reveal-card_content').forEach(content => { ... }); ScrollTrigger.refresh(); }); Sorry I can't be of more assistance Happy Tweening!

Hi @16067_1494126611 and welcome to the GSAP Forums! I think there is no need to use position sticky and scrolling for achieving this. Is far simpler to just use position absolute and yPercent: https://gsap.com/resources/get-started/#transform-shorthand Here is a fork of your demo: https://codepen.io/GreenSock/pen/wvbKBQP Hopefully this helps. Happy Tweening!

Hi @Scott Humphrey and welcome to the GSAP Forums! There is not a lot we can do without a minimal demo. The only things I can see is that you're animating the trigger element on the Y axis: gsap.fromTo(container, { y: "-100px", clipPath: "inset(100% 100% 100% 100% round 40px 40px 40px 40px)" }, { y: "0px", clipPath: "inset(0% 0% 0% 0% round 40px 40px 40px 40px)", ease: "cubic-bezier(0, 0.56, 0.49, 1)", scrollTrigger: { trigger: container, start: "top bottom", end: "top 20%", scrub: true, markers: true, } }); That is definitely not a good idea. Always avoid animating the trigger element especially in the Y axis since that will throw off the calculations made by ScrollTrigger. Finally the DOMContentLoaded event doesn't wait for the images, so maybe the images are being loaded after the ScrollTrigger instances which throws off ScrollTrigger calculations for start/end: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event You can use the load event: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event Or use a library like Images Loaded: https://imagesloaded.desandro.com/ Hopefully this helps. Happy Tweening!

Hi @Prathamesh and welcome to the GSAP Forums! Indeed without a minimal demo there is not a lot we can do. On a quick glimpse of your code I can see this: const Anim1 = ScrollTrigger.create({ trigger: "anim1", onEnter: () => { }, onLeave: () => { }, onEnterBack: () => { } // <- MISSING COMMA HERE onLeaveBack: () => { } }) The trigger element you're passing is not a valid selector. GSAP will use anim1 and try to find that element in the DOM: document.querySelectorAll("anim1"); // => NodeList [] So basically there is nothing being selected and you're passing an empty node list to GSAP. In both snippets you have a missing comma, so you should be getting an error there. Finally thanks for being a Club GSAP member and supporting GSAP! 💚 Happy Tweening!

Hi, Yeah there is too much code in there. In JS Fiddle you have to select Typescript from the dropdown at the top/left corner of the JS section and even when you do that there is another error because Util is undefined: declare const Util: any; You create the type declaration but you're not creating Util anywhere. Hopefully this helps. Happy Tweening!

Nope, no need for that. The reason is that you are restarting a Timeline that already is scoped inside the useGSAP hook and that will be reverted during cleanup when/if the component unmounts. Something like this: https://stackblitz.com/edit/gsap-react-basic-f48716 You would need to use contexSafe if you were doing something like this: const myClickHandler = () => { gsap.to(".element", { rotation: "+=180" }); }; In that case that animation is not being reverted nor cleaned up, because is not inside a GSAP Context instance, for that you use contextSafe: const { contextSafe } = useGSAP(() => {}, { scope: myRef, }); const myClickHandler = contextSafe(() => { gsap.to(".element", { rotation: "+=180" }); }); Finally that selector being used is now using the scope passed in the useGSAP hook. Hopefully this clear things up. Happy Tweening!

Hi, I checked your demo and is a bit convoluted and difficult to follow, since this is not the simplest thing to do, so porting it to React is also not super trivial. The first recommendation would be to use our useGSAP hook instead of useEffect: https://gsap.com/resources/React Then create the ScrollTrigger, Observer (ScrollTrigger.observe()) and swiper instances in a useGSAP hook without any dependencies. There is no need to create those over and over again when updating the state of the component, especially the index value. When you update the index value all you care about is to switch the slide nothing more, so those GSAP instances could be created in the scope of contextSafe: https://gsap.com/resources/React/#making-your-animation-context-safe The most important thing here is to see if keeping track of the active slide is important or not and if it should be kept in the component's state or not. Hopefully this helps. Happy Tweening!

Hi, I'm not sure I understand what's the exact issue you're having right now, so based on your last post I came up with this: https://codepen.io/GreenSock/pen/RwmPyOV That would be my approach to handle async data coming in and increasing the width of the element you're moving left/right. Hopefully this helps. Happy Tweening!

Hi, Just set the maximum number of elements for each batch to be 1 with : https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()#configuration Something like this: ScrollTrigger.batch(".section", { onEnter: (batch) => { let targets = []; batch.forEach(el => { targets.push(...Array.from(el.querySelectorAll('h1, p'))) }); gsap.from(targets, { y: "100%", opacity: 0, stagger: 0.3, duration: 1.2, delay: 0.6, ease: "power4.out", stagger: { each: 0.3, from: "start", ease: "none" } }); }, batchMax: 1, start: "top bottom" }); Hopefully this helps. Happy Tweening!

Hi, Sorry to hear about the issues but there is too much code in your demo for us to start finding the probable issue(s) in it. The one thing I could see is that in several places you're creating Observer instances, all of them with the default window object as a target, that means that you could have more than one Observer instance active at the same time. I wouldn't recommend that unless it is exactly what you're trying to do. My recommendation would be to start this in a very simple way until you grasp the way of getting this to work the way you intend. Just create a simple Timeline and get to play and reverse it using Observer. Finally an important detail is that at some point (most likely when the animation is complete) you have to disable the Observer instance in order to resume regular scrolling. Based on what I can see, what you're trying to do is closer to this demo, where the Observer instance is enabled immediately and after the slides are done it's disabled and normal scrolling is enabled again: https://codepen.io/GreenSock/pen/oNdNLxL Hopefully this helps. Happy Tweening!

Hi, This is a bit beyond the scope of the help we provide in these free forums, since locomotive is not a GSAP product and we don't have the time resources to provide support for it, and the particular setup you have is a part of the problem as well (not being able to give an element a fixed height and overflow). Here is a demo of Locomotive using ScrollTrigger: https://codepen.io/GreenSock/pen/bGQaqzw Hopefully that helps. Happy Tweening!

Hi, I remembered this demo that could help as well: https://codepen.io/GreenSock/pen/KKYbeKL Happy Tweening!